<template>
	<el-dialog
		:visible.sync="reportDialog"
		class="reportDialog" width="800px">
		<h3 class="title"><span></span>自评报告</h3>
		<div class="basicInfo">
			<h3>基本信息</h3>
			<ul class="info">
				<li><span>姓名：</span>{{options.username}}</li>
				<li><span>手机号：</span>{{options.telphone}}</li>
				<li><span>工作岗位意向：</span>{{options.job}}</li>
			</ul>
		</div>
		<div class="skill clearfix">
			<h3>技能自评</h3>
			<ul class="skill-list">
				<li class="list-tr clearfix">
					<span>评价认证</span>
					<span>一般</span>
					<span>良好</span>
					<span>优秀</span>
				</li>
				<li class="list-td clearfix"  v-for="(skill,index) in options.skillListPre" :key="index">
					<div class="td-label">{{skill.name}}</div>
					<div class="td-progress">
						<el-progress :percentage="skill.per" :show-text="false"></el-progress>
					</div>
				</li>
			</ul>
			<ul class="skill-list">
				<li class="list-tr clearfix">
					<span>评价认证</span>
					<span>一般</span>
					<span>良好</span>
					<span>优秀</span>
				</li>
				<li class="list-td clearfix"  v-for="(skill,index) in options.skillListNext" :key="index">
					<div class="td-label">{{skill.name}}</div>
					<div class="td-progress">
						<el-progress :percentage="skill.per" :show-text="false"></el-progress>
					</div>
				</li>
			</ul>
		</div>
	</el-dialog>
</template>

<script>
export default{
	props:{
		options:{
			type: Object,
			require: true
		}
	},
	data(){
		return {
			reportDialog:false
		}
	},
	methods:{
		open(){
			this.reportDialog = true;
		},
		close(){
			this.reportDialog = false;
		}
	}
}
</script>

<style scoped="scoped">
.reportDialog .title{
	height: 60px;
	line-height: 60px;
	font-size: 15px;
	font-weight: bold;
	border-bottom: 1px solid #D2D2D2;
	padding: 0 0 0 30px;
}
.reportDialog .title span{
	width: 10px;height: 20px;
	float: left;background: #0064E4;
	margin: 20px 15px 0 0;
}

.basicInfo,.skill{
	margin: 15px 30px;
}
.basicInfo h3,.skill h3{
	font-size: 15px;
	line-height: 30px;
	color: #000;
}
.basicInfo .info li{
	margin-left: 15px;
	color: #000;
	font-size: 12px;
	line-height: 30px;
}
.basicInfo .info li span{
	color: #ACACAC;
}
.skill-list{
	width: 40%;float: left;
	background-color: #F5F5F5;
	border-radius: 8px;
	padding: 5px 10px;
	margin: 10px 30px 30px 0;
	color: #000;
	font-size: 12px;
}
.list-tr span{
	float: left;width: 20%;
	line-height: 40px;
	text-align: center;
}
.skill-list .list-tr span:nth-child(1){
	width: 25%;margin-right: 40px;
}
.list-td{
	position: relative;
	height: 26px;
	line-height: 26px;
}
.list-td .td-label{
	position: absolute;
	left: 20px;top: 0;
	width: 100px;
}
.list-td .td-progress{
	width: 88%;
	padding: 10px 0 0 130px;
}
</style>
